<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery/jquery.min.js"></script>
	<script src="js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
	<script src="js/jquery.validation/1.14.0/messages_zh.min.js"></script>
	<style>
		input.error{
			border: 1px solid #E6594E;
		}
	</style>
</head>
<body>
	 <div class="container">
	
		<form id="addUserForm">
		  <br/>
		  <div class="form-group">
			<label for="username">用户名称：</label>
			<input type="text" class="form-control" id="username" name="username" placeholder="输入名称">
		  </div>
		  <div class="form-group">
			<label for="userage">用户年龄：</label>
			<input type="text" class="form-control" id="userage" name="userage" placeholder="输入年龄">
		  </div>
		  <div class="form-group">
		  <button type="button" id="saveBtn" class="btn btn-success">提交</button>
		  <button type="button" id="cancelBtn" class="btn btn-default">取消</button>
		  </div>
		</form>
    </div>
    
    <script>
    var addUser = function(){
		if(!check().form()){ 
			return;  
		}
		$.ajax({
			   type: "GET",
			   dataType: "json",
			   url: "/add.do",
			   data: {
					"userName": $("#username").val(),
					"age":$("#userage").val()
			   },
			   success: function(msg){
					$('#cancelBtn').click();			
			   },
			   error:function (m) {
				   console.log('进入了error函数');
			   }
		});
	}
	
	$('#saveBtn').on('click', function(){
		addUser();
	});
	
	$('#cancelBtn').on('click', function(){
		var index = parent.layer.getFrameIndex(window.name);
		parent.getUsersPageList();
		parent.layer.close(index);
	});
    
    
    
  //校验字段是否正确 
    function check(){ 
        /*返回一个validate对象，这个对象有一个form方法，返回的是是否通过验证*/ 
        return $("#addUserForm").validate({ 
                    rules:{ 
                        username:{ 
                            required:true
                        },
                        userage:{ 
                            required:true                                   
                        }
                    }, 
                    messages:{ 
                        username:{ 
                            required:""
                        },
                        userage:{ 
                            required:""                                
                        }
                    }     
                }); 
    } 
    
    </script>
</body>
